<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome Youtube Theme Example</title>
    <script type="module" src="../../../dist/index.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/yt/+esm"></script>
    <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/youtube-video-element@1.0"></script> -->

    <style>
      .examples {
        margin-top: 20px;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-theme-yt {
        display: block;         /* expands the container if preload=none */
        max-width: 720px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      video {
        width: 100%;      /* prevents video to expand beyond its container */
      }
    </style>
  </head>
  <body>
    <h1>Media Chrome - YouTube Theme</h1>

    <media-theme-yt>
      <video
        slot="media"
        src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
        poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.jpg?time=56"
        crossorigin
        muted
        playsinline
      >
        <track
          label="thumbnails"
          default
          kind="metadata"
          src="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/storyboard.vtt"
        />
      </video>
    </media-theme-yt>

    <div class="examples">
      <a href="../">View more examples</a>
    </div>
  </body>
</html>
